<!--
 * @Descripttion: 分类筛选器
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2022年5月26日15:59:52
 * @LastEditors: Xujianchen
 * @LastEditTime: 2023-03-18 13:09:49
-->

<template>
	<div class="sc-select-filter">
		<div v-if="data.length <= 0" class="sc-select-filter__no-data">暂无数据</div>
		<div v-for="item in data" :key="item.key" class="sc-select-filter__item">
			<div class="sc-select-filter__item-title" :style="{ width: labelWidth + 'px' }">
				<label>{{ item.title }}：</label>
			</div>
			<div class="sc-select-filter__item-options">
				<ul>
					<li
						v-for="option in item.options"
						:key="option.value"
						:class="{ active: selected[item.key] && selected[item.key].includes(option.value) }"
						@click="select(option, item)"
					>
						<el-icon v-if="option.icon"><component :is="option.icon" /></el-icon>
						<span>{{ option.label }}</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		data: { type: Array, default: () => [] },
		selectedValues: {
			type: Object,
			default: () => {
				return {}
			}
		},
		labelWidth: { type: Number, default: 80 },
		outputValueTypeToArray: { type: Boolean, default: false }
	},
	data() {
		return {
			selected: {}
		}
	},
	watch: {
		data(val) {
			val.forEach((item) => {
				this.selected[item.key] =
					this.selectedValues[item.key] || (Array.isArray(item.options) && item.options.length)
						? [item.options[0].value]
						: []
			})
		}
	},
	computed: {
		selectedString() {
			var outputData = JSON.parse(JSON.stringify(this.selected))
			for (var key in outputData) {
				outputData[key] = outputData[key].join(',')
			}
			return outputData
		}
	},
	mounted() {
		//默认赋值
		this.data.forEach((item) => {
			this.selected[item.key] =
				this.selectedValues[item.key] || (Array.isArray(item.options) && item.options.length)
					? [item.options[0].value]
					: []
		})
	},
	methods: {
		select(option, item) {
			//判断单选多选
			if (item.multiple) {
				//如果多选选择的第一个
				if (option.value === item.options[0].value) {
					//就赋值第一个的值
					this.selected[item.key] = [option.value]
				} else {
					//如果选择的值已有
					if (this.selected[item.key].includes(option.value)) {
						//删除选择的值
						this.selected[item.key].splice(
							this.selected[item.key].findIndex((s) => s === option.value),
							1
						)
						//当全删光时，把第一个选中
						if (this.selected[item.key].length === 0) {
							this.selected[item.key] = [item.options[0].value]
						}
					} else {
						//未有值的时候，追加选中值
						this.selected[item.key].push(option.value)
						//当含有第一个的值的时候，把第一个删除
						if (this.selected[item.key].includes(item.options[0].value)) {
							this.selected[item.key].splice(
								this.selected[item.key].findIndex((s) => s === item.options[0].value),
								1
							)
						}
					}
				}
			} else {
				//单选时，如果点击了已有值就赋值
				if (!this.selected[item.key].includes(option.value)) {
					this.selected[item.key] = [option.value]
				} else {
					return false
				}
			}
			this.change()
		},
		change() {
			if (this.outputValueTypeToArray) {
				this.$emit('onChange', this.selected)
			} else {
				this.$emit('onChange', this.selectedString)
			}
		}
	}
}
</script>

<style scoped>
.sc-select-filter {
	width: 100%;
}
.sc-select-filter__item {
	display: flex;
}
.sc-select-filter__item-title {
	width: 80px;
}
.sc-select-filter__item-title label {
	font-size: 14px;
	padding-top: 13px;
	display: inline-block;
	color: #999;
}
.sc-select-filter__item-options {
	flex: 1;
	border-bottom: 1px dashed var(--el-border-color-light);
}
.sc-select-filter__item-options ul {
	display: flex;
	flex-wrap: wrap;
	padding-top: 10px;
}
.sc-select-filter__item-options li {
	list-style: none;
	cursor: pointer;
	height: 28px;
	padding: 0 15px;
	border-radius: 32px;
	margin: 0 10px 10px 0;
	display: flex;
	align-items: center;
	background: var(--el-color-primary-light-9);
}
.sc-select-filter__item-options li .el-icon {
	margin-right: 3px;
	font-size: 16px;
}
.sc-select-filter__item-options li:hover {
	color: var(--el-color-primary);
}
.sc-select-filter__item-options li.active {
	background: var(--el-color-primary);
	color: #fff;
	font-weight: bold;
}
.sc-select-filter__item:last-of-type .sc-select-filter__item-options {
	border: 0;
}

.sc-select-filter__no-data {
	color: #999;
}
</style>
